<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/list.css">
    <script src="./js/promiseAjax.js"></script>
</head>
<body>
    <div class="goods container">
        <div class="content">
            <ul class="clearfix goodsList">

            </ul>
        </div>
        <div class="pagebox">

        </div>

    </div>
</body>
<script>
    var page = 1
    var pageSize=8
    var goodsList=document.querySelector('.goodsList')
    var pagebox = document.querySelector('.pagebox')
    var totalPage
    getGoods()
    function getGoods(){
        request({
            url:`/api/goods/getAllGoods/${page}/${pageSize}`
        }).then(res=>{
            console.log(res)
            var data=res.data.data
            totalPage=res.data.totalPage
            var html = ''
            data.forEach(goods=>{
            html+=`
                <li>
                    <a style="display:block;width:100%;height:100%" href="detail.html?id=${goods._id}">
                    <img src="${goods.img_big_logo}" alt="">
                    <p>${goods.price}</p>
                    <p class="goodstitle">${goods.title}</p>
                    </a>
                </li>
            `
            })
            goodsList.innerHTML =html
            pagebox.innerHTML =`
                <span onclick="first()">首页</span>
                <span onclick="prev()">上一页</span>
                <b style="font-weight:normal;">
            `
            if(totalPage<=5){
                for(var a=1;a<=totalPage;a++){
                    pagebox.innerHTML +=`
                    <a onclick="go(${a})">${a}</a>
                    `
                }
            }else{
                if(page<=3){
                    for(var a=1;a<=5;a++){
                    pagebox.innerHTML +=`
                    <a onclick="go(${a})">${a}</a>
                    `
                }
                }else if(page>=totalPage-2){
                    for(var a=totalPage-4;a<=totalPage;a++){
                    pagebox.innerHTML +=`
                    <a onclick="go(${a})">${a}</a>
                    `
                    }
                }else{
                    for(var a=page-2;a<=page+2;a++){
                    pagebox.innerHTML +=`
                    <a onclick="go(${a})">${a}</a>
                    `
                    }   
                }
            }
                pagebox.innerHTML +=`
                    </b>
                <span onclick="next()">下一页</span>
                <span onclick="last()">尾页</span>
            `
        })
    }
    //首页就让page=1 重新调用函数
    function first(){
        page=1
        getGoods()
    }
    function last(){
        //最后一页
        page=totalPage
        getGoods()
    }
    //上一页
    function prev(){
        page--
        if(page<1){
            page=1
        }
        getGoods()
    }
    function next(){
        page++
        if(page>totalPage){
            page=totalPage
        }
        getGoods()
    }
    //接收上面传下来的a页
    function go(a){
        page=a
        getGoods()
    }
</script>
</html>